<script setup>
</script>

<template>
    <div class="main">
        <div class="homePage">
            <h1 class="title">ComponentPlus</h1>
        </div>
        <div class="Spon">
            <div class="sponTitle">Platinum Sponsors</div>
            <div class="sponItems">
                <div class="sponItem" v-for="value in 4">
                    <div class="icon">O</div>
                    <div class="info">
                        <div class="infoTitle">美乐</div>
                        <p class="infoContent">Enterprise-level low-code development platform</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="Spon">
            <div class="sponTitle">Platinum Sponsors</div>
            <div class="sponItems">
                <div class="sponItem" v-for="value in 3">
                    <div class="icon">O</div>
                    <div class="info">
                        <div class="infoTitle">美乐</div>
                        <p class="infoContent">Enterprise-level low-code development platform</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="detailPage"></div>
        <div class="foooter"></div>
    </div>
</template>

<style lang="scss" scoped>
.main {
    width: 100%;
    min-height: calc(100vh - 80px);

    .homePage {
        width: 100%;
        height: calc(100vh - 80px);

        .title {
            text-align: center;
            padding: 50px 0;
            height: 100px;
            font-size: 48px;
            font-weight: 800;
        }
    }

    .sponTitle {
        padding: 20px 0;
        font-size: 20px;
        font-weight: 700;
    }

    .sponItems {
        display: flex;
        flex-wrap: wrap;

        .sponItem {
            width: 50%;
            display: flex;

            .icon {
                height: 100%;
                width: 30px;
                font-weight: 700;
                display: flex;
                justify-content: center;
                align-items: center;

            }

            .infoTitle {
                font-size: 14px;
                font-weight: 700;
            }

            .infoContent {
                font-size: 12px;
            }
        }
    }

    .Spon {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 40px;
    }
}
</style>